<template>
  <div class="movielist-view">
    <h2>全部电影</h2>

    <div class="movie-grid">
      <MovieCard v-for="movie in allMovies" :key="movie.id" :movie="movie" />
    </div>

    <el-pagination
      background
      layout="prev, pager, next"
      :total="allMovies.length"
      :page-size="20" 
      style="margin-top: 20px; justify-content: center;"
    />
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import request from '../utils/request'
import MovieCard from '../components/MovieCard.vue'

const allMovies = ref([])

onMounted(async () => {
  try {
    const res = await request.get('/movies')
    if (res.data.success) {
      allMovies.value = res.data.data
    }
  } catch (error) {
    console.error('获取电影列表失败:', error)
  }
})
</script>

<style scoped>
.movielist-view {
  max-width: 1200px;
  margin: 0 auto;
}
.movie-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
}
</style>